import React, { Component } from 'react'
import { observer } from 'mobx-react/custom'
import * as api from 'lib/constants/api'
import BankListVM from 'cvm/bankList/bankList'
import './bankList.less'

const BankLists = observer(({ vm }) => {
  return (
    <div className='bank-list'>
      {
        vm.backListDetail.length &&
        vm.backListDetail.map((item, index) => {
          return (
            <div key={index} className='list-detail flex-wrap'
              onClick={() => { vm.HandleChooseBank(item.BankCode, item.BankIcon, item.BankName) }}>
              <div className='flex-1 left'><img src={api.WZ_IMAGE_PATH + item.BankIcon} /></div>
              <div className='flex-4 right'>{item.BankName}</div>
            </div>
          )
        })
      }
    </div>
  )
})

@observer
class bankList extends Component {
  constructor (props) {
    super(props)
    window.document.title = '选择开户行'
    this.vm = new BankListVM(props)
  }
  render () {
    return (
      <div>
        <BankLists vm={this.vm} />
      </div>
    )
  }
}

export default bankList
